<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/tex-mml-chtml.js" async></script>
    <style>
        body {
            background-color: transparent;
            font-family: Arial, sans-serif;
        }
    </style>
    <script type="text/javascript">
        function updateFormula(radius) {
            document.getElementById("detailed").innerHTML = "$$ A = \\pi \\times" + radius  + "^{2} $$";
            MathJax.typeset();
        }
    </script>
</head>
<body>
<div>Formula:</div><br/>
<div >$$ A = \pi  r^{2}  $$</div><br/>
<div>Detailed:</div><br/>
<div id="detailed">$$ C = \pi  r^{2}  $$</div>
</body>
</html>